<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Internet pizzeria - New Customer</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAGaVKsN7Fq_fEe0RJPADRCBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxR_HUEVtZQfC_2K48p4H3BMNKsMCQ"
      type="text/javascript"></script>
    <script type="text/javascript">
  
  var geocoder;
  
  
  
  function validateAddress(){
   var streetAndNumber = document.getElementById('streetAndNumber').value;
   var zipCode = document.getElementById('zipCode').value;
   var city = document.getElementById('city').value;
   var country = document.getElementById('country').value;
   
   geocoder = new GClientGeocoder();  
   checkAddress(streetAndNumber+", "+city+", "+zipCode+", "+country);   
  }
  
  function checkAddress(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
                alert("Address " + address + " not found");                           
            } else {               	
               	document.getElementById("form").submit();	    			    	
            }
          }
        );
      }
    }
    
    
  function validateForm(){
  	var valid = true;
  	var login = document.getElementById('login').value;
  	var password = document.getElementById('password').value;
  	var confirmPassword = document.getElementById('confirmPassword').value;
 	var streetAndNumber = document.getElementById('streetAndNumber').value;
    var zipCode = document.getElementById('zipCode').value;
    var city = document.getElementById('city').value;
  	var country = document.getElementById('country').value;
  	var name = document.getElementById('name').value;
  	var surname = document.getElementById('surname').value;
  	var telephone = document.getElementById('telephone').value;
  	
  	clearComments();
  	var passwordFilled = false;
  	var confirmPasswordFilled = false;
  	
  	if (login == null || login == ""){  	
  		document.getElementById('loginComment').innerHTML = "Fill this field";
  		valid = false;
  	}  	
  	if (password == null || password == ""){
  		document.getElementById('passwordComment').innerHTML = "Fill this field";
  		valid = false;
  	}else{
  		passwordFilled = true;
  	}
  	
  	if (confirmPassword == null || confirmPassword == ""){
  		document.getElementById('confirmPasswordComment').innerHTML = "Fill this field";
  		valid = false;
  	}else{
  		confirmPasswordFilled = true;
  	}
  	if (passwordFilled && confirmPasswordFilled && password != confirmPassword){
  		document.getElementById('confirmPasswordComment').innerHTML = "Fields Password and Confirm password have to be identical";
  		valid = false;
  	}
  	if (streetAndNumber == null || streetAndNumber == "" ){
  		document.getElementById('streetAndNumberComment').innerHTML = "Fill this field";
  		valid = false;
  	}
  	if (zipCode == null || zipCode == ""){
  		document.getElementById('zipCodeComment').innerHTML = "Fill this field";
  		valid = false;
  	}
  	if (city == null || city == ""){
  		document.getElementById('cityComment').innerHTML = "Fill this field";
  		valid = false;
  	}
  	if (country == null || country == ""){
  		document.getElementById('countryComment').innerHTML = "Fill this field";
  		valid = false;
  	}
  	if (name == null || name == ""){
  		document.getElementById('nameComment').innerHTML = "Fill this field";
  		valid = false;
  	}
  	if (surname == null || surname == ""){
  		document.getElementById('surnameComment').innerHTML = "Fill this field";
  		valid = false;
  	}
  	if (telephone == null || telephone == ""){
  		document.getElementById('telephoneComment').innerHTML = "Fill this field";
  		valid = false;
  	}
  	return valid;
  }
  
  function clearComments(){
  	document.getElementById('loginComment').innerHTML = "";
	document.getElementById('passwordComment').innerHTML = "";
	document.getElementById('confirmPasswordComment').innerHTML = "";
	document.getElementById('streetAndNumberComment').innerHTML = "";
	document.getElementById('zipCodeComment').innerHTML = "";
	document.getElementById('cityComment').innerHTML = "";
	document.getElementById('countryComment').innerHTML = "";
	document.getElementById('nameComment').innerHTML = "";
	document.getElementById('surnameComment').innerHTML = "";
	document.getElementById('telephoneComment').innerHTML = "";
  }
  
  	function validate(){ 
  		if (validateForm()){
  			validateAddress();		  			  		 			
  		}
  	}
  
    </script>
  </head>
<body>
	<h4>New account</h4>
	<form method="post" id="form" action="newCustomer.do">
	
	<div>${duplicatedLogin}</div>
	<table>
		<tr>
			<td>Login:</td>
			<td>
			<input type="text"  name="login" id="login" />	
			</td> 	
			<td id="loginComment"></td>		
		</tr>		
		<tr>
			<td>Password:</td>
			<td>
			<input type="password"  name="password" id="password"/>	
			</td> 
			<td id="passwordComment"></td>					
		</tr>
		<tr>
			<td>Confirm password:</td>
			<td>
			<input type="password"  name="confirmPassword" id="confirmPassword" />	
			</td>
			<td id="confirmPasswordComment"></td>								
		</tr>
		<tr>
			<td>Name:</td>
			<td>
			<input type="text"  name="name" id="name" />	
			</td>
			<td id="nameComment"></td>					
		</tr>
		<tr>
			<td>Surname:</td>
			<td>
			<input type="text"  name="surname" id="surname" />	
			</td>
			<td id="surnameComment"></td>					
		</tr>
		<tr>
			<td>Telephone:</td>
			<td>
			<input type="text"  name="telephone" id="telephone" />	
			</td>
			<td id="telephoneComment"></td>					
		</tr>
		<tr>
			<td>Street and number:</td>
			<td>
			<input type="text"  name="streetAndNumber" id="streetAndNumber" />	
			</td>
			<td id="streetAndNumberComment"></td>					
		</tr>
		<tr>
			<td>Zip code:</td>
			<td>
			<input type="text"  name="zipCode" id="zipCode" />	
			</td>
			<td id="zipCodeComment"></td>					
		</tr>
		<tr>
			<td>City:</td>
			<td>
			<input type="text"  name="city" id="city" />	
			</td>
			<td id="cityComment"></td>					
		</tr>
		<tr>
			<td>Country:</td>
			<td>
			<input type="text"  name="country" id="country" />	
			</td>
			<td id="countryComment"></td>					
		</tr>
		<tr>
			<td>	
				<input type="button" onclick="validate()" value="Register">
			</td>
		</tr>
	</table>
	</form>	

	<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
